<template>
    <div class="vip-card-container">
        <!-- 有会员卡 -->
        <div v-if="userInfo.vip" class="vip-container vip-open" @click="$router.push('/setting/vipcenter')">

            <div class="vip-content" v-if="userInfo.subscribeType === 1">
                <div class="vip-top">
                    <img class="vip-logo" width="20" height="20" src="@/assets/img/yikaton-active.png" alt="">
                    <span><span class="vip-text">一卡通</span> <span class="vip-little">(全场策略免费用)</span></span>
                </div>
                <div class="vip-tip" v-if="$route.name !== 'VipCenter'">
                    <span v-if="userInfo.leftDays">{{ userInfo.leftDays }}天后过期</span>
                    <span v-else>您的一卡通已过期</span>
                </div>
            </div>
            <div class="vip-content" v-else>
                <div class="vip-top">
                    <img class="vip-logo" width="20" height="20" src="@/assets/img/yikaton-active.png" alt="">
                    <span style="font-size:13px;color:var(--main-color);">单独订阅:{{ getStrategyName()}}</span>
                </div>
                <!-- <div class="vip-strategy-list" v-if="userInfo.subStrategyIds && userInfo.subStrategyIds.length">{{ getStrategyName()
                }}</div> -->
                <div class="vip-tip">
                    <span v-if="userInfo.leftDays">{{ userInfo.leftDays }}天后过期</span>
                    <span v-else>您的一卡通已过期</span>
                </div>
            </div>
            <div class="btn-vip-container" v-if="$route.name !== 'VipCenter'" @click.stop="$router.push('/setting/vipcenter')">
                <span class="btn-vip">续费</span>
                <span class="vip-ad">春节限时特惠</span>
            </div>
        </div>
        <!-- 没有会员卡 -->
        <div v-else class="vip-container">

            <div class="vip-content">
                <div class="vip-top">
                    <img class="vip-logo" width="20" height="20" src="@/assets/img/yikatong.png" alt="">
                    <span><span class="vip-text">一卡通</span> <span class="vip-little">(全场策略免费用)</span></span>
                </div>
                <div class="vip-tip">您的一卡通已过期</div>
            </div>
            <div class="btn-vip-container" @click="$router.push('/setting/vipcenter')">
                <span class="btn-vip">续费</span>
                <span class="vip-ad">春节限时特惠</span>
            </div>
        </div>

    </div>
</template>

<script>
import { mapState } from 'pinia'
import { useUserStore } from '@/store/user'
export default {
    name: 'price',
    props: {
        userInfo: {
            type: Object,
            default: (() => {})
        }
    },
    data() {
        return {};
    },
    components: {},
    computed: {
        ...mapState(useUserStore, ['strategyAllList']),
    },
    watch: {},
    created() {

    },
    mounted() {
        this.init();
    },
    methods: {
        getStrategyName() {
            let name = [];
            this.strategyAllList.forEach(item => {
                if (this.userInfo.subStrategyIds.includes(item.id)) {
                    name.push(item.strategyName);
                }
            });
            return name.join(',')
        },
        init() {

        },


    }
};
</script>
<style lang="less" scoped>
.vip-strategy-list {
    font-size: 12px;
    font-weight: 500;
    color: var(--main-color)
}
</style>